0<template>
    <div :class="{NoMessage:data[1]}">
        <span>{{data[0]}}</span>
    </div>
</template>
<script>

export default {
   data() {
    return {
        
    }
   },
   props:{
     data:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
   },
   mounted() {
   }
   
}
</script>
<style lang="less" scoped>
    
    div,span,ul,li,img{
    font-size: 0;
}
    .NoMessage{
        
         animation-name:control;
        animation-duration: 2s;
    }
      @keyframes control {
    //          0%,
    // 33.33%,
    // 66.66%,
    // 100% {
    //     opacity:0.8
    // }
    // 16.66%,
    // 50% {
    //     opacity:0;
    // }

      0%{opacity:0.8;}

          80%{opacity:0.8;}
          90%{opacity: 0.7;}
          100%{opacity:0;}
        }
   div{
    box-shadow: 0px 2px 6px rgb(0 0 0 / 6%);
    padding: 18px 26px;
    background: black;
    border-radius: 20px;
    opacity:0;
   position:fixed;
   top: 60%;
    left: 50%;
    transform: translate(-60%,-50%);
    span{
        font-size: 18px;
        color: white;
    }
   }
</style>